<template>
  <view class="flex-col justify-start relative page">
    <view class="flex-row justify-between items-center section_3">
      <image
             class="image_4"
             src="@/static/common/back.png" @click="handleBackClick" />
      <text class="text">{{$t('mine.friend')}}</text>
      <image
             class="image_4"
             src="@/static/mine/history.png" @click="handleHistoryClick" />
    </view>
    <view class="flex-row horiz-list group">
      <view class="ml-12 flex-col justify-start items-start horiz-list-item image-wrapper" :style="[itemStyle(index,invitation.imgs.length,item)]" v-for="(item,index) in invitation.imgs">
        <div :id="'qrCode'+index" class="image_5" />
      </view>
    </view>
    <view class="flex-col justify-start items-center text-wrapper pos_3"><text class="font">Save Poster</text></view>
    <view class="flex-col section_4 pos_4">
      <view class="flex-row justify-between items-center self-stretch group_2">
        <view class="flex-row">
          <text class="font text_2">{{$t('mine.inviteCode')}}：</text>
          <text class="font text_3 ml-3">{{inviteCode}}</text>
        </view>
        <view class="flex-col text-wrapper_2" @click="handleCodeCopy"><text class="text_4">{{$t('common.copy')}}</text></view>
      </view>
      <view class="self-stretch divider"></view>
      <text class="self-start font text_5">{{$t('mine.share')}}：</text>
      <view class="flex-row equal-division">
        <view class="flex-col items-center group_3 equal-division-item">
          <image
                 class="image_7"
                 src="@/static/mine/copy_link.png" @click="handleLinkCopy" />
          <text class="font text_7 mt-9">{{$t('mine.copyUrl')}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import QRCode from 'qrcodejs2'

import { getInvitation } from '@/service/mine.js'
export default {
  components: {},
  props: {},
  data() {
    return {
      invitation: {},
      inviteCode: ''
    };
  },
  computed: {
    ...mapGetters({
      profile: "user/getProfile",
    }),
    itemStyle() {
      return (index, len, url) => {
        let style = {
          backgroundImage: 'url(' + url + ')',
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat'
        };
        if (index === len - 1) {
          style.marginRight = '5.5rem';
        }
        return style;
      }
    },
  },
  mounted() {
    this.getInvitation();
    this.inviteCode = this.profile.inviteCode;
  },
  methods: {
    async getInvitation() {
      const res = await getInvitation();
      if (res.statusCode === 200) {
        this.invitation = res.data;
        this.$nextTick(() => {
          for (let i = 0; i < res.data.imgs.length; i++) {
            const qrCode = new QRCode('qrCode' + i, {
              width: 64,
              height: 64,
              text: res.data.url
            })
          }

        })

      }
    },
    handleBackClick() {
      uni.navigateBack()
    },
    handleHistoryClick() {
      uni.navigateTo({
        url: "/pages/mine/invitation/history/index"
      })
    },
    handleLinkCopy() {
      const clipboard = navigator.clipboard
      if (clipboard) {
        clipboard.writeText(this.invitation.url).then(() => {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          });
        })
      }
    },
    handleCodeCopy() {
      const clipboard = navigator.clipboard
      if (clipboard) {
        clipboard.writeText(this.inviteCode).then(() => {
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          });
        })
      }
    }
  },
};
</script>

<style scoped lang="scss">
.ml-5 {
  margin-left: 0.31rem;
}

.ml-3 {
  margin-left: 0.19rem;
}

.mt-9 {
  margin-top: 0.56rem;
}

.page {
  background-image: url('@/static/common/b-home.png');
  background-size: cover;
  padding-bottom: 10rem;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .section_2 {
    padding: 1.13rem 0.94rem 1.13rem 2.25rem;
    background-color: #33333300;

    .image {
      width: 1.06rem;
      height: 0.56rem;
    }

    .image_2 {
      width: 0.94rem;
      height: 0.56rem;
    }

    .image_3 {
      width: 1.5rem;
      height: 0.71rem;
    }
  }

  .pos {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }

  .section_3 {
    padding: 0.5rem 1rem;
    background-color: #ffffff00;

    .image_4 {
      border-radius: 0.5rem;
      width: 1.78rem;
      height: 1.78rem;
    }

    .text {
      color: #ffffff;
      font-size: 1.13rem;
      font-family: PingFang SC;
      line-height: 0.83rem;
    }
  }

  .pos_2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 3rem;
  }

  .horiz-list {
    position: absolute;
    right: 0;
    top: 7.75rem;

    .horiz-list-item {
      flex-shrink: 0;

      .image_5 {
        margin-left: 0.94rem;
        border-radius: 0.19rem;
        width: 4.06rem;
        height: 4.06rem;
      }
    }

    .image-wrapper {
      padding: 20.25rem 0 1rem;
      border-radius: 0.5rem;
      filter: drop-shadow(0rem 0.5rem 0.5rem #00000080);

      width: 13.94rem;
      height: 25.25rem;
    }

  }

  .group {
    overflow-x: auto;
    width: 18.69rem;
  }

  .text-wrapper {
    padding: 0.88rem 0;
    background-image: linear-gradient(122.7deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
    border-radius: 0.75rem;
    width: 9.56rem;
  }

  .pos_3 {
    position: absolute;
    left: 50%;
    top: 34rem;
    transform: translateX(-50%);
  }

  .font {
    font-size: 0.75rem;
    font-family: PingFang SC;
    line-height: 0.56rem;
    color: #ffffff;
  }

  .section_4 {
    padding-bottom: 2.38rem;
    border-radius: 1.5rem 1.5rem 0rem 0rem;
    background-image: url('/web/static/mine/invitation_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .group_2 {
      padding: 1.25rem 1rem 1rem;

      .text_2 {
        font-size: 0.81rem;
        line-height: 0.6rem;
      }

      .text_3 {
        font-size: 0.81rem;
        line-height: 0.6rem;
      }

      .text-wrapper_2 {

        background-color: #ffffff26;
        border-radius: 0.25rem;
        box-shadow: 0rem 0rem 0.75rem #0000000d;
        width: 3rem;
        height: 1.13rem;
        justify-content: center;
        text-align: center;

        .text_4 {
          color: #00f6ff;
          font-size: 0.75rem;
          font-family: PingFang SC;
          line-height: 0.69rem;
        }
      }
    }

    .divider {
      margin: 0 1rem;
      background-color: #ffffff1a;
      height: 0.031rem;
    }

    .text_5 {
      margin-left: 1rem;
      margin-top: 1.25rem;
      font-size: 0.81rem;
      line-height: 0.6rem;
    }

    .equal-division {
      align-self: stretch;
      margin-top: 1.38rem;

      .group_3 {
        flex: 1 1 7.81rem;

        .image_6 {
          width: 2.5rem;
          height: 2.5rem;
        }

        .image_7 {
          overflow: hidden;
          width: 3rem;
          height: 3rem;
        }

        .text_6 {
          line-height: 0.55rem;
        }

        .text_7 {
          line-height: 0.69rem;
        }
      }

      .equal-division-item {
        padding: 0.38rem 0;
      }
    }
  }

  .pos_4 {
    position: absolute;
    left: 0;
    right: 0;
    top: 37.44rem;
  }
}
</style>